<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
        .yellow {
            color: yellow;
        }
        .border {
            border: 1px solid black;
        }
        
    </style>
</head>
<body>
    <div id="test">
        <input v-bind:type="inputtype" name="" id="">
        <h1 v-bind:class="{red:isRed,border:isBorder}">测试绑定class</h1>
        <h2 :class="[color,border]">测试数组方式绑定class</h2>
        <h1>购物车测试</h1>
        <table style="border: 1px solid black;">
            <tr>
                <td>游戏名</td>
                <td>数量</td>
                <td>单价</td>
                <td>小计</td>
            </tr>
            <tr>
                <td>{{goods[0].name}}</td>
                <td>
                    <button @click="sub(0)">-</button>
                    <input type="number" v-model.number="goods[0].num">
                    <button @click="add(0)">+</button>
                </td>
                <td>{{goods[0].price}}</td>
                <td>{{goods[0].sum}}</td>
            </tr>
            <tr>
                <td>{{goods[1].name}}</td>
                <td>
                    <button @click="sub(1)">-</button>
                    <input type="number" v-model.number="goods[1].num">
                    <button @click="add(1)">+</button>
                </td>
                <td>{{goods[1].price}}</td>
                <td>{{goods[1].sum}}</td>
            </tr>
            <tr>
                <td>{{goods[2].name}}</td>
                <td>
                    <button @click="sub(2)">-</button>
                    <input type="number" v-model.number="goods[2].num">
                    <button @click="add(2)">+</button>
                </td>
                <td>{{goods[2].price}}</td>
                <td>{{goods[2].sum}}</td>
            </tr>
            <tr>
                <td>{{goods[3].name}}</td>
                <td>
                    <button @click="sub(3)">-</button>
                    <input type="number" v-model.number="goods[3].num">
                    <button @click="add(3)">+</button>
                </td>
                <td>{{goods[3].price}}</td>
                <td>{{goods[3].sum}}</td>
            </tr>
            
        </table>
        <p>总计{{total}}</p>
    </div>
    <script>
        const vm = new Vue({
            el:"#test",
            data(){
                return{
                    inputtype:"text",
                    isRed:true,
                    isBorder:true,
                    color:"red",
                    border:"border",
                    goods:[
                        {
                            name:"Witcher3",
                            price:68,
                            num:0,
                            sum:0
                        },
                        {
                            name:"City-Skyline",
                            price:88,
                            num:0,
                            sum:0
                        },
                        {
                            name:"Civilization6",
                            price:168,
                            num:0,
                            sum:0
                        },
                        {
                            name:"AssassinCreed",
                            price:268,
                            num:0,
                            sum:0
                        }
                    ],

                }
                
            },
            computed:{
                total(){
                    console.log("getTotal")
                    let total = 0;
                    for(var i in this.goods){
                        total += this.goods[i].sum
                    }
                    return total;
                }
            },
            methods:{
                sub(index){
                    if(this.goods[index].num>=1){
                        this.goods[index].num -= 1
                        this.goods[index].sum = this.goods[index].num*this.goods[index].price
                    }
                },
                add(index){
                    this.goods[index].num += 1
                    console.log(this.goods[index].num)
                    this.goods[index].sum = this.goods[index].num*this.goods[index].price
                }
            },

        })
    </script>
</body>
</html>